<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<style>
			b ody{
				height: 100000000px;
				width: 100%;
				background-image: url(img/芙宁娜.jpg);
				background-size: cover;
				/* 函数 cover 等比例放大图片 特点：原图按照比例放大存背景空间
				【开发者 ：背景图大小是否等于背景空间】
				 contain 等比例缩小图片 特点：图片按照比例缩放存背景空间
				 */
				/* 背景附件-尺寸中存在cover 或者contain  */
				background-attachment: fixed; /*固定fixed 不固定scroll*/
				
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #cbc9ff;
				background: #cbc9ff;
				background-image: url(img/p_small_003.jpg);
				background-image: url(img/芙宁娜.jpg);
				/* 问题：大图不显示 
				注意：背景空间大小，如果图小于背景空间--平铺
				*/
			   background-repeat: no-repeat; 
			   /* 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺 */
			   background-size: 30%;
			   /* 背景尺寸属性值 数值px % |函数 cover contain */
			   /* 背景定位 :背景空间大于背景图 关键字:center left right top */
			   background-position: center bottom; 
			   background-position: 80% 0;
			   
			}
			
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum, alias voluptate dolorem rerum quidem tenetur ut odio neque a? Eveniet quasi porro, sapiente numquam dicta quas dolorum! Ea, officiis libero!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque perferendis nesciunt quae temporibus exercitationem nihil pariatur aliquid magnam doloremque quas obcaecati voluptate, cumque repellat deleniti sint neque laudantium, dolorem eum?
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, suscipit possimus labore quia laudantium eius? Commodi, eveniet expedita maiores, quasi sint aut modi dolorum ea rerum perspiciatis soluta ratione aspernatur.
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sit deleniti nobis ullam possimus cum voluptatibus cumque voluptatem! Fuga fugit hic iste ducimus officiis quo nihil dicta architecto libero alias.
		
		<!-- html img图片 引入一张图片 位置不可随意改变
		     css img图片 引入一张图片 位置可以随意改变
			 子属性：background-color 背景颜色 
			 复合属性：background 替代子属性
			 -->
			 <div></div>
	</body>
</html>